<template>
<div id="contact-us">
  <navigation></navigation>
  <div class="banner">
    <p>ADMISSIONS TEAM</p>
    <p>招生官团队</p>
    <div class="item"></div>
  </div>
  <div class="contact">
    <p>联系我们</p>
    <p>CONTACT US</p>
    <div class="item"></div>
    <div class="desc">
      <p>总部地址：上海市杨浦区国权路43号财富国际广场<br> 银座2002-2007
        <br> 总部电话：400-002-6699
        <br> 电子邮箱：Alex@keywinus.com
        <br> 邮政编码：200082
      </p>
    </div>
  </div>
  <div class="contact-container">
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-2.jpg" />
      <p>青胜留学上海公司</p>
    </div>
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-3.jpg" />
      <p>青胜留学上海公司</p>
    </div>
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-4.jpg" />
      <p>青胜留学上海公司</p>
    </div>
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-5.jpg" />
      <p>上海青胜留学赞助复旦<br>管院毕业典礼</p>
    </div>
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-6.jpg" />
      <p>青胜留学旧金山分公司<br>团队
      </p>
    </div>
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-7.jpg" />
      <p>青胜留学旧金山分公司<br>团队</p>
    </div>
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-8.jpg" />
      <p>青胜留学纽约总部团队</p>
    </div>
    <div class="contact-item">
      <img src="../../assets/images/contactUs/contact-9.jpg" />
      <p>青胜留学纽约总部团队</p>
    </div>
  </div>
  <input v-model="name" placeholder="姓名" />
  <input v-model="phone" placeholder="电话" />
  <input v-model="email" placeholder="邮箱" />
  <textarea v-model="content" placeholder="内容" />
  <p @click="submit" class="submit">提交</p>
  <pageFooter></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

export default {
  components: {
    navigation,
    pageFooter
  },
  data() {
    return {
      name: '',
      phone: '',
      email: '',
      content: ''
    }
  },
  created() {

  },
  methods: {
    submit() {
      var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
      if (this.name == '') {
        alert('姓名不能为空')
        return
      }
      if (this.phone == '') {
        alert('电话不能为空')
        return
      }
      if (!myreg.test(this.email)) {
        alert('邮箱格式错误')
        return
      }
      if (this.content == '') {
        alert('内容不能为空')
        return
      }
      NetworkUtil.request({
        url: '/message/token',
        method: 'get'
      }, info => {
        sessionStorage.setItem('X-CSRF-TOKEN', info.token)
        NetworkUtil.request({
          url: '/api/message/store',
          method: 'post',
          body: encodeURI('name=' + this.name + '&phone=' + this.phone + '&email=' + this.email + "&content=" + this.content + "&type=2&_token=" + info.token)
        }, info => {
          alert('提交成功')
          this.name = ''
          this.phone = ''
          this.email = ''
          this.content = ''
        }, err => {
          alert('提交失败')
        })
      }, err => {
        alert('获取token失败')
      })
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
</style>
